<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-17 21:48:52
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-25 12:04:18
-->
<template>
	<div class="dashoard">
		<!-- 头 -->
		<div class="top">
			<div class="topdata">
				数据中心
			</div>
			<div class="topright">
				<div>
					统计时间：
					2023年8月8日 ~ 2023年9月7日</div>
				<div class="toprightButn">
					<el-button type="primary">实时</el-button>
					<el-button type="primary">日</el-button>
					<el-button type="primary">周</el-button>
					<el-button type="primary">月</el-button>
				</div>
			</div>
		</div>
		<div class="gap"></div>
		<div class="card">
			<el-row :gutter="20">

				<el-col :span="4">
					<Card :customer="customer" />

				</el-col>
				<el-col :span="4">
					<Card :customer="customer" />

				</el-col>
				<el-col :span="4">
					<Card :customer="customer" />

				</el-col>
				<el-col :span="4">
					<Card :customer="customer" />
				</el-col>
				<el-col :span="4">
					<Card :customer="customer" />
				</el-col>
				<el-col :span="4">
					<Card :customer="customer" />
				</el-col>
			</el-row>
		</div>
		<div class="gap"></div>
		<div class="notice">
			<el-row :gutter="20">
				<el-col :span="8">
					<Table :tableData="tableData" />
				</el-col>
				<el-col :span="8">
					<Table :tableData="tablecnter" />
				</el-col>
				<el-col :span="8">
					<Table :tableData="tablefollow" />
				</el-col>
			</el-row>
		</div>
		<div class="gap"></div>
		<div class="tablefrom">
			<el-row :gutter="20">
				<el-col :span="12">
					<LineVue />
				</el-col>
				<el-col :span="12">
					<ComVue />
				</el-col>
			</el-row>

		</div>
		<div class="gap"></div>
		<div class="circle">
			<el-row :gutter="20">
				<el-col :span="8">
					<EChartCom />
				</el-col>
				<el-col :span="8">

					<EChartBar />
				</el-col>
				<el-col :span="8">
					<EChartCricle />

				</el-col>
			</el-row>
		</div>
		<div class="gap"></div>
	</div>
</template>

<script setup lang="ts">

import { onMounted, reactive, ref } from 'vue';
import LineVue from './ui/Line.vue';
import ComVue from './ui/Com.vue';
import { deepCopy } from '@/utils/Tools/deepCopy';
import { userDashoardBoardApi, userDashoardCardApi } from '@/services/dashoard'

interface CustomerInfo {
	value: any;
	customerInfo: string
	customerName: string;
	cardData: string;
	monthComparisonPercentage: number;
	yearComparisonPercentage: number;
	monthComparisonColor: string;
	yearComparisonColor: string;
	yearBoolean: boolean;
	monthBoolean: boolean;
}

let customer = ref<CustomerInfo>({
	value: undefined,
	customerInfo: '',
	customerName: '',
	cardData: '',
	monthComparisonPercentage: 0,
	yearComparisonPercentage: 0,
	monthComparisonColor: '',
	yearComparisonColor: '',
	yearBoolean: true,
	monthBoolean: false
})

onMounted(async () => {
	let ret = await userDashoardCardApi()
	customer.value = ret.data.card
})






const tableData = {
	tableHeader: "公告栏",
	tableType: "BulletinVue",
	Data: [
		{
			id: 1,
			noticedata: '2016-05-02',
			notice: 'No. 189, Grove St, Los Angeles',
		},
		{
			id: 2,
			noticedata: '2016-05-02',
			notice: 'No. 189, Grove St, Los Angeles',
		},
		{
			id: 3,
			noticedata: '2016-05-02',
			notice: 'No. 189, Grove St, Los Angeles',
		},
		{
			id: 4,
			noticedata: '2016-05-02',
			notice: 'No. 189, Grove St, Los Angeles',
		},]
}
const tablecnter = {
	tableHeader: "代办中心",
	tableType: "centerVue",
	Data: [
		{
			id: 1,
			noticedata: '2016-05-02',
			name: '张三',
			notice: 'No. 189, Grove St, Los Angeles',
		},
		{
			id: 1,
			noticedata: '2016-05-02',
			name: '李四',
			notice: 'No. 189, Grove St, Los Angeles',
		},
		{
			id: 3,
			noticedata: '2016-05-02',
			name: '张三',
			notice: 'No. 189, Grove St, Los Angeles',
		},
		{
			id: 4,
			noticedata: '2016-05-02',
			name: '李四',
			notice: 'No. 189, Grove St, Los Angeles',
		},]
}
const tablefollow = {
	tableHeader: "近期跟进",
	tableType: "followVue",
	Data: [
		{
			id: 1,
			companydata: '2016-05-02',
			company: '张三有限公司',
			companytype: "拜访",
			companynotice: 'No. 189, Grove St, Los Angeles',
		},
		{
			id: 2,
			companydata: '2016-05-02',
			company: '李四有限公司',
			companytype: "电话",
			companynotice: 'No. 189, Grove St, Los Angeles',
		}]
}




</script>

<style lang="scss" scoped>
.dashoard {
	width: 100%;
	margin: auto;
	height: 100vh;
	background-color: #fff;

	.top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;

		div {
			margin: 0 20px;
		}

		.topdata {
			color: blue;
		}

		.topright {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.toprightButn {
				margin: 0 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	.card {
		width: 100%;
	}

	.notice {
		width: 100%;
	}

	.tablefrom {
		width: 100%;
	}

	.circle {
		width: 100%;
	}

}

.gap {
	height: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 0;
	margin-bottom: 20px;
}
</style>